<template>
  <a-card>
    <!-- 顶部查询 -->
    <a-form-model
      ref="ruleForm"
      :model="searchForm"
      v-bind="layout"
      :rules="rules"
    >
      <a-row>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="仓库名称" ref="depotName" prop="depotName">
            <a-select
              v-model="searchForm.depotName"
              showSearch
              @change="selectWarehouse"
            >
              <a-select-option
                v-for="item in WarehouseCodeList"
                :key="item.id"
                :value="item.depotNo + '|' + item.depotName + '|' + item.id"
                >{{ item.depotNo }} {{ item.depotName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <!-- <a-col :xl="6" :lg="8" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="所属单位">
            <a-select
              v-model="searchForm.storageUnit"
              showSearch
              @change="
                (value) => {
                  let array = value.split('|');
                  this.searchForm.storageUnit = array[1];
                  this.searchForm.storageUnitId = array[2];
                }
              "
            >
              <a-select-option
                v-for="item in WarehouseCodeList"
                :key="item.id"
                :value="item.depotNo + '|' + item.depotName + '|' + item.id"
                >{{ item.depotNo }} {{ item.depotName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col> -->
        <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="时间期间"
           ref="Date"
              prop="Date"
          >
            <a-range-picker
              v-model="searchForm.Date"
              value="searchForm.Date"
              @change="DateChange"
            />
          </a-form-model-item>
        </a-col>

        <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
          <a-form-model-item ref="sort" label="存货分类" prop="sort">
            <!-- <a-select v-model="searchForm.sort" showSearch @change="sortchange">
            <a-select-option
              v-for="item in inventoryNoList"
              :key="item.value"
              :value="item.value"
              >{{ item.title }}</a-select-option
            >
          </a-select> -->
            <a-tree-select
              showSearch
              v-model="searchForm.sort"
              style="width: 100%"
              allow-clear
              placeholder="添加存货时，不需要选择"
              :tree-data="inventoryNoList"
              @change="sortchange"
              onSelect
              tree-node-filter-prop="title"
              :replace-fields="replaceFields"
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="存货名称">
            <!-- <a-input disabled v-model="searchForm.inventoryName"></a-input> -->
            <a-select
              v-model="searchForm.inventoryName"
              @change="addinventoryNameChange"
              @search="handleSearch"
              showSearch
            >
              <a-select-option
                v-for="val in inventoryList"
                :key="val.id"
                :value="
                  val.inventoryNo +
                  '|' +
                  val.inventoryName +
                  '|' +
                  val.inventoryId
                "
                >{{ val.inventoryNo }} {{ val.inventoryName }}</a-select-option
              >
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :xl="8" :lg="8" :md="8" :sm="24" :xs="24">
          <a-form-model-item label="存货编码">
            <a-input disabled v-model="searchForm.inventoryNo"></a-input>
            <!-- <a-select
            v-model="searchForm.inventoryNo"
            @change="addinventoryNameChange"
            @search="handleSearch"
            showSearch
          >
            <a-select-option
              v-for="val in inventoryList"
              :key="val.id"
              :value="
                val.inventoryNo +
                '|' +
                val.inventoryName +
                '|' +
                val.inventoryId
              "
              >{{ val.inventoryNo }} {{ val.inventoryName }}</a-select-option
            >
          </a-select> -->
          </a-form-model-item>
        </a-col>
        <a-col
          :xl="8"
          :lg="8"
          :md="8"
          :sm="24"
          :xs="24"
          :style="{ textAlign: 'right' }"
        >
          <a-button type="primary" @click="getSearch()"> 查询 </a-button>
          <a-button :style="{ marginLeft: '8px' }" @click="handleReset">
            重置
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 列表显示 -->
    <a-form-model>
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        @change="handleTableChange"
        style="margin-top: 20px"
        :scroll="{ x: 2000 }"
      >
      </a-table>
    </a-form-model>
  </a-card>
</template>
<script>
import { QiChuShuJuSearchHttp } from "@/services/modules/QiChuShuJu/QiChuShuJuChaXun";
const $http = new QiChuShuJuSearchHttp();
// import { ZiDianBiaoHttp } from "@/services/modules/ZiDianBiao";
// const $ZDB = new ZiDianBiaoHttp();
import { CommonAjax } from "@/services/modules/common";
const comHttp = new CommonAjax(); // 公用接口
const columns = [
  //表格属性
  { title: "序号", dataIndex: "num", key: "key", align: "center" },
  // {
  //   title: "所属单位",
  //   dataIndex: "storageUnit_dictText",
  //   key: "storageUnit_dictText",
  //   align: "center",
  // },
  {
    title: "仓库",
    dataIndex: "depotId_dictText",
    key: "depotId_dictText",
    align: "center",
  },
  {
    title: "存货分类",
    dataIndex: "pkInvcl_dictText",
    key: "pkInvcl_dictText",
    align: "center",
  },
  {
    title: "存货编码",
    dataIndex: "invcode",
    key: "invcode",
    align: "center",
  },
  {
    title: "存货名称",
    dataIndex: "invname",
    key: "invname",
    align: "center",
  },
  {
    title: "规格型号",
    dataIndex: "invspec",
    key: "invspec",
    align: "center",
  },
  {
    title: "单位",
    dataIndex: "unit",
    key: "unit",
    align: "center",
  },
  {
    title: "批次",
    dataIndex: "batchNumber",
    key: "batchNumber",
    align: "center",
  },
  {
    title: "期初数量",
    dataIndex: "balance",
    key: "balance",
    align: "center",
  },
  {
    title: "出库数量",
    dataIndex: "deliveryQuantity",
    key: "deliveryQuantity",
    align: "center",
  },
  {
    title: "入库数量",
    dataIndex: "storageQuantity",
    key: "storageQuantity",
    align: "center",
  },
  {
    title: "期末结存",
    dataIndex: "finalQuantity",
    key: "finalQuantity",
    align: "center",
  },
  // {
  //   title: "时间期间",
  //   dataIndex: "rangeDate",
  //   key: "rangeDate",
  //   align: "center",
  // },
];
const dataSource = [];
export default {
  data() {
    return {
      rules: {
        // 仓库名称
        depotName: [
          {
            required: true,
            message: "请选择仓库名称",
            trigger: "change",
          },
        ],
         // 时间
        Date: [
          {
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
      },
      replaceFields: {
        children: "syncInventoryClassificationEntityList",
        title: "invclassname",
        value: "pkInvcl",
      },
      inventoryList: [], //存货编码、名称、规格型号、单位
      WarehouseCodeList: [], //仓库列表
      inventoryNoList: [], //存货分类列表
      // ---------- 分页使用 -------------
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        showSizeChanger: true,
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      },
      queryParam: {
        //查询参数
        page: 1, //第几页
        size: 10, //每页中显示数据的条数
        hosName: "",
        hosCode: "",
        province: "",
        city: "",
      },
      searchForm: {
        inventoryOrganizationFileId: "", // 仓库id
        depotName: "", // 仓库名称
        // storageUnit: "", // 存储单位 所属单位id
        // storageUnitId: "", // 存储单位id  所属单位id
        rangeDate: "", //时间期间
        beginDate: "",
        endDate: "",
        sort: "", //存货分类
        inventoryInformationFileId: "", //存货编码
        inventoryName: "", //存货名称
      },

      startTime: "", //开始时间
      endTime: "", //结束时间

      layout: {
        labelCol: { span: 8 }, //字
        wrapperCol: { span: 15 }, //框内大小
      },
      columns,
      dataSource,
      queryPathCache: "",
    };
  },

  mounted() {
    this.getInventoryClassificationList(); // 获取存货分类
    this.getAllNumberName_new_forU8c(); // 获取仓库编码、名称
    // this.GetInventoryInformationList1(); //存货信息档案列表-获取
    // this.getInventoryInformationByStorageId(); // 存货信息档案-返回存货编码、名称、规格型号、单位
    // this.searchBeginningDataentryList(); //期初数据
  },
  methods: {
    // 新增表单选择存货编码编码的change触发函数
    addinventoryNameChange(value, option) {
      console.log(value, "value");
      console.log(option, "option");
      const newValue = value.split("|");
      this.searchForm.inventoryNo = newValue[0];
      this.searchForm.inventoryName = newValue[1];
      this.searchForm.inventoryInformationFileId = newValue[2];
    },
    handleSearch(value) {
      //模糊查询
      this.inventoryList = [];
      console.log("value", value);
      let query = "?name=" + value;
      console.log("query", query);
      if (value == "" || value == null) {
        this.NumberAndList = [];
      } else {
        comHttp.getgetSearchInventoryInformationFile(query).then((res) => {
          console.log("结果为", res);
          // this.goodsList = res.result;
          for (let i = 0; i < res.result.length; i++) {
            if (
              res.result[i].specificationsModel == "null" ||
              res.result[i].specificationsModel == null
            ) {
              res.result[i].specificationsModel = "";
            }
            if (res.result[i].unit == "null" || res.result[i].unit == null) {
              res.result[i].unit = "";
            }
            let data = {
              inventoryId: res.result[i].pkInvbasdoc, // 存货 id
              inventoryNo: res.result[i].invcode, //存货编码
              inventoryName: res.result[i].invname, //存货名称
              // specificationsModel: res.result[i].specificationsModel, //规格型号
              // unit: res.result[i].unit, //单位
            };
            this.inventoryList.push(data);
          }
        });
      }
    },
    searchBeginningDataentryList() {
      // let data = "?pageNo=" + this.queryParam.page;

      const { current, pageSize } = this.pagination;
      let _query = `?pageNo=${current}&pageSize=${pageSize}`;
      _query += this.queryPathCache;

      $http.searchBeginningDataentryList(_query).then((res) => {
        console.log("----- 列表数据 ---- \n", res);

        if (!res.success) {
          this.$message.error(res.message);
          return;
        }

        const pagination = { ...this.pagination };
        pagination.total = res.result.total;
        pagination.pageSize = res.result.size;
        pagination.current = res.result.current;

        let data = res.result.records;
        data.forEach((item, index) => {
          item.key = index + 1;
          item.num = index + 1;
        });
        this.dataSource = data;

        // this.dataSource = res.result;
        // this.pagination.total = res.result.total;
      });
    },
    //查询按钮
    getSearch() {
      let searchForm = this.searchForm;
      let queryForm = {
        inventoryOrganizationFileId: searchForm.inventoryOrganizationFileId,
        // storageUnitId: searchForm.storageUnitId,
        beginDate: searchForm.beginDate,
        endDate: searchForm.endDate,
        sort: searchForm.sort,
        inventoryInformationFileId: searchForm.inventoryInformationFileId,
        // beginDate: "2020-11-11",
        // endDate: "2050-12-12",
        // inventoryOrganizationFileId: "11",
      };

      let querypath = "";
      Object.keys(queryForm).forEach((key) => {
        if (queryForm[key]) {
          querypath += `&${key}=${queryForm[key]}`;
        }
      });
      this.queryPathCache = querypath;

      this.searchBeginningDataentryList();
    },
    // 弹出日历和关闭日历的回调
    DateChange(...option) {
      console.log(option);
      this.searchForm.beginDate = option[1][0];
      this.searchForm.endDate = option[1][1];
    },
    // 搜索栏选择存货编码编码的change触发函数
    inventoryNameChange(value, option) {
      this.searchForm.id = option.key;
      // console.log(value , option);
      const newValue = value.split("|");
      console.log("搜索栏选择了存货编码", newValue);
      this.searchForm.inventoryNo = newValue[0];
      this.searchForm.inventoryName = newValue[1];
    },
    getInventoryClassificationList() {
      //获取存货分类
      comHttp.GetSaveCargoClassification().then((res) => {
        console.log("存货分类", res);
        this.inventoryNoList = res.result;
      });
    },
    getInventoryInformationByStorageId(id) {
      comHttp.getInventoryInformationByStorageId("?id=" + id).then((res) => {
        console.log("获取存货编码、名称、规格、单位", res);
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            inventoryId: res.result[i].id, // 存货 id
            inventoryName: res.result[i].inventoryName, //
            inventoryNo: res.result[i].inventoryNo,
            specificationsModel: res.result[i].specificationsModel,
            unit: res.result[i].unit,
          };
          this.inventoryList.push(data);
        }
        console.log("返回存货编码、存货名称", this.inventoryList);
      });
    },
    //存货分类-搜索
    sortchange(value, option) {
      console.log("选择的存货分类是:", `selected ${value}`);
      console.log(option, "11");
    },
    selectWarehouse(value) {
      //搜索表单的仓库名称的change
      let array = value.split("|");
      this.searchForm.depotName = array[1];
      this.searchForm.inventoryOrganizationFileId = array[2];
    },

    // 获取仓库
    getAllNumberName_new_forU8c() {
      this.storageList = [];
      // 获取仓库名称
      comHttp.getAllNumberName_new_forU8c().then((res) => {
        //   // let tree = this.resetTree(res.result);
        console.log("获取所有仓库", res);
        for (let i = 0; i < res.result.length; i++) {
          let data = {
            id: res.result[i].pkStordoc,
            depotName: res.result[i].storname,
            depotNo: res.result[i].storcode,
          };
          this.WarehouseCodeList.push(data);
        }
        console.log("返回仓库编码、仓库名称", this.WarehouseCodeList);
      });
    },

    // ---------- 分页函数 -------------
    handleTableChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.queryParam.page = pagination.current;
      this.queryParam.size = pagination.pageSize;
      this.getTableList();
    },

    //查询重置
    handleReset() {
      this.searchForm = {
        depotName: "", //仓库名称
        // storageUnitId: "", //存储单位
        rangeDate: "", //事件期间
        beginDate: "",
        endDate: "",
        sort: "", //存货分类
        inventoryNo: "", //存货编码
        inventoryName: "", //存货名称
      };
      console.log("this.searchForm", this.searchForm);
      this.pagination = {
        total: 0,
        current: 1,
        pageSize: 10, //每页中显示10条数据
        // showSizeChanger: true,
        pageSizeOptions: ["10"], //每页中显示的数据
        showTotal: (total) => `共有${total}条数据`, //分页中显示总的数据
      };

      this.queryPathCache = "";
      this.dataSource = [];
      console.log("this.dataSource", this.dataSource);
      // this.searchBeginningDataentryList();
    },
  },
};
</script>
<style>
.ant-advanced-search-form {
  padding: 24px;
  background: #fbfbfb;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
}

.ant-advanced-search-form .ant-form-item {
  display: flex;
}

.ant-advanced-search-form .ant-form-item-control-wrapper {
  flex: 1;
}

#components-form-demo-advanced-search .ant-form {
  max-width: none;
}
#components-form-demo-advanced-search .search-result-list {
  margin-top: 16px;
  border: 1px dashed #e9e9e9;
  border-radius: 6px;
  background-color: #fafafa;
  min-height: 200px;
  text-align: center;
  padding-top: 80px;
}

.editable-row-operations a {
  margin-right: 8px;
}
</style>